.root {
  &-input {
    accent-color: var(--alinea-button-background);
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
  }

  &-checkmark {
    cursor: pointer;
    position: relative;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--alinea-button-background);
    background: var(--alinea-fields);
    box-shadow: var(--alinea-fields-shadow);
    border-radius: 4px;

    &.is-disabled {
      cursor: default;
    }

    &-icon {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex !important;
      align-items: center;
      justify-content: center;
    }
  }

  &-input:focus-visible ~ .root-checkmark {
    background: var(--alinea-fields-selected);
    outline: 2px solid var(--alinea-fields-focus);
  }

  &-label {
    cursor: pointer;
    align-self: center;
    user-select: none;

    &.is-disabled {
      cursor: default;
    }
  }
}
